<template>
    <div class="container wave-section" @mousemove="handleMouseMove" @mouseenter="handleMouseEnter">
        <div class="content">
            <div>友情链接:
                <a href="">韶华杯官网</a>
                <!-- <a href="http://www.changanchangan.com/#/home" target="_blank">长安长安官网</a>/\ -->
                <a href="">长安长安官网</a>
            </div>
            <!-- 备案号 -->
            <div class="record">
                <div>Copyright 北京立于学有限公司版权所有Al Rights Reserved.</div>
                <div>京ICP备2023019159号</div>
                <!-- <div>&nbsp;010-60526023</div> -->
            </div>
            <div>
                网站建设：北京立于学有限公司
            </div>
        </div>
        <div v-if="!isSmallScreen" class="wave-container" ref="waveContainer">
            <div v-for="(block, index) in blocks" :key="index" class="wave-block" :style="{
                height: block.height + 'px',
                backgroundColor: block.color,
                // transform: `translateY(${block.offset}px)`,
                transition: 'height 0.1s ease-out'
            }"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Footer',
    data() {
        return {
            isSmallScreen: window.innerWidth < 960, // 初始判断,
            blocks: [],
            isHovered: false,
            mouseX: 0,
            baseHeight: 50
        }
    },
    mounted() {
        // 监听窗口尺寸变化
        window.addEventListener('resize', this.checkScreenSize);
        if (!this.isSmallScreen) {
            this.initBlocks();
        }
    },
    beforeDestroy() {
        // 清理事件监听
        window.removeEventListener('resize', this.checkScreenSize);
    },
    methods: {
        //监听视口宽度
        checkScreenSize() {
            this.isSmallScreen = window.innerWidth < 960; // 更新状态
        },
        // 初始化色块
        initBlocks() {
            const colors = ['#42b983', '#2c3e50', '#00a0dc', '#1abc9c', '#3498db', '#9b59b6'];
            const blockCount = 20;

            this.blocks = Array.from({ length: blockCount }, (_, index) => ({
                height: this.getRandomHeight(),
                color: colors[index % colors.length],
                offset: 0
            }));
        },
        // 获取随机高度
        getRandomHeight() {
            return Math.random() * 100 + 50;
        },
        // 鼠标移入
        handleMouseEnter() {
            this.isHovered = true;
            this.blocks = this.blocks.map(block => ({
                ...block,
                height: this.baseHeight // 统一高度
            }));
        },
        // 鼠标移动
        handleMouseMove(e) {
            if (!this.isHovered) return; // 为悬停时不处理

            // 如果定时器存在，清除它
            if (this.mouseMoveTimeout) {
                clearTimeout(this.mouseMoveTimeout);
            }

            // 设置新的定时器，5秒后调用 initBlocks 函数
            this.mouseMoveTimeout = setTimeout(() => {
                this.initBlocks();
            }, 5000); // 5000 毫秒（即5秒）

            // 获取容器位置信息
            const container = this.$refs.waveContainer;
            const rect = container.getBoundingClientRect();
            const x = e.clientX - rect.left; // 计算鼠标在容器内的x坐标 
            requestAnimationFrame(() => {
                this.blocks = this.blocks.map((block, index) => {
                    const blockWidth = rect.width / this.blocks.length;
                    const blockCenter = blockWidth * (index + 0.5);
                    const distance = Math.abs(x - blockCenter);
                    const maxDistance = 300; // 减小影响范围提高灵敏度

                    let newHeight = this.baseHeight;
                    if (distance < maxDistance) {
                        const factor = Math.cos(distance / maxDistance * Math.PI) * 0.5 + 0.5;
                        newHeight = this.baseHeight + (80 * factor); // 最大增加80px高度
                    }

                    return {
                        ...block,
                        height: newHeight
                    };
                });
            });
        },
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #ccc, rgb(252, 69, 69));
    color: transparent;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 20px 0;
}

.content {
    width: 80vw;
    height: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.content a {
    color: white;
    margin: 0 20px;
}

.record {
    width: 80%;
    display: flex;
    justify-content: space-around;
}

h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.section-content {
    font-size: 1.2em;
    line-height: 1.6;
}

::v-deep .fp-watermark {
    display: none;
}

.wave-section {
    position: relative;
    overflow: hidden;
}

.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    display: flex;
    justify-content: stretch;
    align-items: flex-end;
    padding: 0 20px;
}

.wave-block {
    flex: 1;
    margin: 0 2px;
    border-radius: 4px 4px 0 0;
    transition: height 0.2s ease-out;
}

.wave-section .content {
    position: relative;
    z-index: 1;
}

/* 小屏幕/手机 */
@media screen and (max-width: 960px) {
    .container {
        font-size: 12px;
        padding: 15px 0;
        line-height: 20px;
    }

    .record {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .content {
        width: 90%;
    }

}
</style>